<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3 id="h3">
        <input type="button" value="修改msg" @click="msg='No'" />

        {{msg}}
      </h3>
    </div>
  </body>
</html>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      msg: "yes",
    },
    methods: {
      show() {
        console.log("执行了show方法");
      },
    },
    beforeCreate() {
      //这是我们遇到的第一个周期函数，表示实例完全被创建出来之前，会执行它
      // console.log(this.msg);
      //this.show()
      //注意在beforeCreate 生命周期函数执行的时候，data 和 methods中的数据都还没有初始化
    },
    created() {
      //这是遇到的第二个周期函数
      // console.log(this.msg)
      // this.show();
      //在created中data和methods已经被初始化好了
      //如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作
    },
    beforeMount() {
      //这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成，但是尚未把模板渲染到页面中
      // console.log(document.getElementById('h3').innerText);
      //在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前的一些模板字符串
    },
    mounted() {
      //这是遇到的第4个生命周期函数，表示内存中的模板，已经真实的挂载到页面中，用户已经可以看到渲染好的页面了
      console.log(document.getElementById("h3").innerText);
      //注意：mounted 是实例创建期间最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，
      //此时如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动
    },

    //接下来的是运行中的两个事件
    beforeUpdate() {
      //这时候，表示我们的界面还没有被更新【数据被更新了吗？ 数据肯定别更新了】
      // console.log('界面上元素的内容：'+ document.getElementById('h3').innerText);
      // console.log('data中的msg数据是：'+ this.msg);
      //得出结论：当执行beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
    },

    updated() {
      // this.msg = !this.msg;
      // console.log(
      //   "界面上元素的内容：" + document.getElementById("h3").innerText
      // );
      // console.log("data中的msg数据是：" + this.msg);
      //updated 时间执行的时候，页面和data数据已经保持同步了，都是最新的
    },
  });
</script>
